<template>
  <BorderBox8 style="width: 100%; height: 100%">
    <div ref="chartRef" style="width: 100%; height: 100%"></div>
  </BorderBox8>
</template>
<script setup>
import { ref, onMounted, onBeforeUnmount } from "vue";
import * as echarts from "echarts";
import { BorderBox8 } from "@kjgl77/datav-vue3";
const chartRef = ref(null);
// 存储 ECharts 实例
let chartInstance = null;
const initChart = () => {
  if (chartRef.value) {
    // 初始化 echarts 实例
    chartInstance = echarts.init(chartRef.value);
    const rawData = [
      [8, 1.5, 1.5, 0.0, 1.8],
      [2, 0.0, 0.0, 0.0, 0.0],
      [267, 107.5, 130, 146, 129],
      [1802, 1749, 1710, 1664, 1485],
    ];
    const totalData = [];
    for (let i = 0; i < rawData[0].length; ++i) {
      let sum = 0;
      for (let j = 0; j < rawData.length; ++j) {
        sum += rawData[j][i];
      }
      totalData.push(sum);
    }
    // 计算每个类别的总和
    const series = ["机器故障", "质量问题", "转型", "无需求"].map(
      (name, sid) => {
        return {
          name,
          type: "bar",
          stack: "total",
          barWidth: "60%",
          label: {
            show: true,
            formatter: (params) => Math.round(params.value * 1000) / 10 + "%",
          },
          data: rawData[sid].map((d, did) =>
            totalData[did] <= 0 ? 0 : d / totalData[did]
          ),
        };
      }
    );
    // 配置项
    const option = {
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
      },
      title: {
        text: "月度报废分析",
        left: "center",
        top: "10%",
        textStyle: {
          color: "#67e0e3",
          fontWeight: "bolder",
          fontSize: "24px",
        },
      },
      legend: {
        data: ["机器故障", "质量问题", "转型", "无需求"],
        textStyle: {
          color: "#fff", // 深灰色
          fontSize: "18px",
        },
        top: "20%", // 根据原始数据中的value数组长度调整这部分
      },
      yAxis: {
        type: "value",
        boundaryGap: [0, 0.01], // 调整x轴的间隙以显示百分比标签
        splitLine: {
          show: true,
          lineStyle: {
            type: "dashed",
          },
        },
        nameTextStyle: {
          color: "white",
        },
        axisLabel: {
          color: "white",
          fontSize: "16px",
          formatter: function (value) {
            // 这里我们硬编码了 value 为 100，使其总是显示为 "100%"
            let result = value * 100;

            return result + "%"; // 注意这里用的是 value === 1 来确保只在必要时显示 "100%"，通常你可能需要根据你的实际数据调整这个条件。
          },
        },
        max: 1,
      },
      grid: {
        bottom: "15%",
        top: "30%",
      },
      xAxis: {
        type: "category",
        data: ["Avg24", "Mar", "Apr", "May", "Jun"],
        nameTextStyle: {
          color: "white",
        },
        axisLabel: {
          color: "white",
          fontSize: "16px",
        },
      },
      series,
    };

    // 使用配置项渲染图表
    chartInstance.setOption(option);
  }
};

// 窗口大小变化时调整图表尺寸
const resizeChart = () => {
  chartInstance?.resize();
};

// 组件挂载后执行初始化
onMounted(() => {
  initChart();
  // 监听窗口大小变化事件以支持响应式
  window.addEventListener("resize", resizeChart);
});

// 组件卸载前清理资源，防止内存泄漏
onBeforeUnmount(() => {
  window.removeEventListener("resize", resizeChart);
  chartInstance?.dispose(); // 销毁 echarts 实例
});
</script>
